<script setup>
    import { ref } from 'vue'
    import { ElMessage } from 'element-plus'

    const form = ref({
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
    })

    const passwordRules = {
        oldPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        confirmPassword: [
            { required: true, message: '请确认新密码', trigger: 'blur' },
            {
                validator: (rule, value, callback) => {
                    if (value !== form.value.newPassword) {
                        callback(new Error('两次密码输入不一致'))
                    } else {
                        callback()
                    }
                },
                trigger: 'blur'
            }
        ]
    }

    const submitForm = () => {
        // 这里可以做密码修改的逻辑
        ElMessage.success('密码修改成功')
    }

</script>

<template>
    <div class="modify-password">
        <el-form :model="form" ref="formRef" label-width="120px" status-icon>
            <el-form-item label="当前密码" prop="oldPassword" :rules="passwordRules.oldPassword">
                <el-input type="password" v-model="form.oldPassword" placeholder="请输入当前密码" />
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword" :rules="passwordRules.newPassword">
                <el-input type="password" v-model="form.newPassword" placeholder="请输入新密码" />
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword" :rules="passwordRules.confirmPassword">
                <el-input type="password" v-model="form.confirmPassword" placeholder="请确认新密码" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">修改密码</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
    .modify-password {
        padding: 20px;
    }
</style>